<template>
  <div>
      <h3>基础用法</h3>
      <p>基础的折叠窗组件用法</p>
      <div class="component-wrapper">
        <div class="component-wrapper-demo">
           <g-collapse>
        <g-collapse-item title="标题一">内容一</g-collapse-item>
        <g-collapse-item title="标题二">内容二</g-collapse-item>
        <g-collapse-item title="标题三">dddd</g-collapse-item>
      </g-collapse>
        </div>
        <div class="code-content" v-highlight style="height: 0;">
          <div class="code-content-height">
            <!-- <div class="code-user-desc">
            组件描述说明
            </div>-->
            <pre><code class="vue">{{codeStr}}</code></pre>
          </div>
        </div>
        <div class="lock-code" @click="showCode(0)" ref="one">
          <g-icon class="icon-down" :icon="isShow[0] === false ? 'down' : 'up'"></g-icon>
          <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
        </div>
      </div>
      <h3>attributes</h3>
      <p>组件参数说明</p>
    </div>
  </div>
</template>
 
<script lang="ts">
import Vue from "vue";
import gCollapse from "../../../src/Collapse.vue";
import gCollapseItem from "../../../src/CollapseItem.vue";
import gIcon from "../../../src/Icon.vue";
import mixin from "../mixin";

export default {
  name: "gButton",
  mixins: [mixin],
  data() {
    return {
      codeStr: ` <g-collapse>
        <g-collapse-item title="标题一">内容一</g-collapse-item>
        <g-collapse-item title="标题二">内容二</g-collapse-item>
        <g-collapse-item title="标题三">dddd</g-collapse-item>
      </g-collapse>`.replace(/^\s*/gm, "")
        .trim(),
    };
  },
  components: {
    "g-icon":gIcon,
    "g-collapse": gCollapse,
    "g-collapse-item": gCollapseItem,
  },
};
</script>
<style scoped>
.icon{
  margin-right:20px ;
}
</style>
